<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Ratings by Gender and Genre</title>
    <!-- 引入 ECharts -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>-->
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="chart" style="width: 100%; height: 600px;"></div>

<script>
    // 初始化ECharts实例
    var myChart = echarts.init(document.getElementById('chart'));

    // 获取电影评分数据
    fetch('/api/movies/ratings')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            console.log('API数据:', data); // 打印API获取的数据

            // 处理数据
            let maleRatings = {};
            let femaleRatings = {};
            data.forEach(item => {
                if (item.viewerGender === "M") {
                    maleRatings[item.movieGenre] = item.avgRating;
                } else if (item.viewerGender === "F") {
                    femaleRatings[item.movieGenre] = item.avgRating;
                }
            });

            console.log('男性评分:', maleRatings); // 打印男性评分数据
            console.log('女性评分:', femaleRatings); // 打印女性评分数据

            // 提取所有的电影类型
            let genres = Array.from(new Set(data.map(item => item.movieGenre)));
            let maleRatingsData = genres.map(genre => maleRatings[genre] || 0);
            let femaleRatingsData = genres.map(genre => femaleRatings[genre] || 0);

            console.log('电影类型:', genres); // 打印电影类型
            console.log('男性评分数据:', maleRatingsData); // 打印男性评分数据数组
            console.log('女性评分数据:', femaleRatingsData); // 打印女性评分数据数组

            // 配置图表选项
            const option = {
                title: {
                    text: 'Movie Ratings by Gender and Genre',
                    left: 'center',
                    textStyle: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        fontFamily: 'Arial',
                        color: '#333'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['Male', 'Female'],
                    top: 'bottom',
                    textStyle: {
                        fontSize: 16,
                        color: '#333'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: genres,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            fontSize: 14,
                            fontFamily: 'Arial',
                            color: '#333'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} Stars',
                            fontSize: 14,
                            fontFamily: 'Arial',
                            color: '#333'
                        }
                    }
                ],
                series: [
                    {
                        name: 'Male',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: maleRatingsData,
                        itemStyle: {
                            color: '#1f77b4'
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: 14,
                            fontFamily: 'Arial',
                            color: '#fff'
                        }
                    },
                    {
                        name: 'Female',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        data: femaleRatingsData,
                        itemStyle: {
                            color: '#ff7f0e'
                        },
                        label: {
                            show: true,
                            position: 'inside',
                            fontSize: 14,
                            fontFamily: 'Arial',
                            color: '#fff'
                        }
                    }
                ]
            };

            // 使用配置项设置图表
            myChart.setOption(option);
        })
        .catch(error => console.error('Error:', error));
</script>
</body>
</html>
